<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner{width: 300px;height:90px;margin: 50px auto;position: relative;}

    .banner .imgbox{position: absolute;left:0px;}
    .banner .imgbox img{width: 300px;height: 90px;float: left;}

    .banner .btns input{position: absolute;width: 30px;height:30px;top: 30px;}
    .banner .btns .left{left:0;}
    .banner .btns .right{right:0;}

    .banner .list{position: absolute;left:0;right:0;height: 10px;display: flex;background: rgba(200,200,200,0.5);bottom:0}
    .banner .list span{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
    .banner .list span.active{background: red;}

  </style>
</head>
<body>
  <div class="banner box1"></div>
  <div class="banner box2"></div>
  <div class="banner box3"></div>
  <div class="banner box4"></div>
</body>
<script>
  const bannerData = [{
    name:"图1",
    src:"../imgs/banner1.jpg"
  },{
    name:"图2",
    src:"../imgs/banner2.jpg"
  },{
    name:"图3",
    src:"../imgs/banner3.jpg"
  },{
    name:"图4",
    src:"../imgs/banner4.jpg"
  },{
    name:"图5",
    src:"../imgs/banner5.jpg"
  }];

  class Model{
    imgs(){
      return bannerData;
    }
    // 双11(){}
    // 双旦(){}
  }

  class View{
    constructor(data, box){
      this.data = data;
      this.box = box;

      this.imgbox = document.createElement("div")
      this.imgbox.className = "imgbox";
      let str = "";
      this.data.forEach(val=>{
        str += `<img src="${val.src}">`
      })
      this.imgbox.innerHTML = str;
      this.box.appendChild(this.imgbox);
      this.imgbox.style.width = this.data.length * this.imgbox.children[0].offsetWidth + "px"
    }
    page(){
      this.list = document.createElement("div");
      this.list.className = "list";
      let str = "";
      for(let i=0;i<this.data.length;i++){
        str += `<span></span>`;
      }
      this.list.innerHTML = str;
      this.box.appendChild(this.list);
    }
    btn(){
      this.btns = document.createElement("div");
      this.btns.className = "btns";

      this.left = document.createElement("input");
      this.left.className = "left";
      this.left.value = "<";
      this.right = document.createElement("input");
      this.right.className = "right";
      this.right.value = ">";
      this.left.type = this.right.type  = "button";

      this.btns.appendChild(this.left);
      this.btns.appendChild(this.right);

      this.box.appendChild(this.btns);
    }
  }

  class Ctrl{
    constructor(box){
      this.box = box
      this.m = new Model()
      this.v = new View( this.m.imgs(),  this.box);
      // 没有分页器没有左右按钮也能切换图片（自动切换）
    }
    pageFn(){
      this.v.page();
      // 分页器的功能
    }
    btnFn(){
      this.v.btn();
      // 左右按钮的功能
    }
  }

  const box1 = document.querySelector(".box1");
  const c1 = new Ctrl(box1);
  c1.btnFn();
  
  const box2 = document.querySelector(".box2");
  const c2 = new Ctrl(box2);
  c2.pageFn();
  
  const box3 = document.querySelector(".box3");
  const c3 = new Ctrl(box3);
  c3.pageFn();
  c3.btnFn();

  const box4 = document.querySelector(".box4");
  const c4 = new Ctrl(box4);

  
</script>
</html>